<template>
    <div>
        <div class="ba_f pad_20">
            <div class="shuju_title mar_b20">
                <div class="shuju_title_text">
                    <span>活动概况</span>
                </div>
            </div>
            <div class="main-icon flex t_l mar_t20">
                <div class="flex-1 t_l pad_20 bortColor">
                    <div class="flex-bet flex-y-top">
                        <div>
                            <p class="title6 fon_14">参与人数(人)</p>
                            <p class="fon_30 title35 lh16 pad_tb_20">{{invitData.joinPeople || 0}}</p>
                        </div>
                        <div class="toolTip">
                            <el-tooltip effect="dark" placement="top">
                                <div slot="content">参与人数</div>
                                <button type="button"
                                        class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                  <span>
                    <i class="el-icon-question"></i>
                  </span>
                                </button>
                            </el-tooltip>
                        </div>
                    </div>
                </div>
                <div class="flex-1 t_l pad_20 bortColor">
                    <div class="flex-bet flex-y-top">
                        <div>
                            <p class="title6 fon_14">新用户人数(人)</p>
                            <p class="fon_30 title35 lh16 pad_tb_20">{{invitData.newPeople || 0}}</p>
                        </div>
                        <div class="toolTip">
                            <el-tooltip effect="dark" placement="top">
                                <div slot="content">新用户人数</div>
                                <button type="button"
                                        class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                  <span>
                    <i class="el-icon-question"></i>
                  </span>
                                </button>
                            </el-tooltip>
                        </div>
                    </div>
                </div>
                <div class="flex-1 t_l pad_20 bortColor">
                    <div class="flex-bet flex-y-top">
                        <div>
                            <p class="title6 fon_14">活动完成人数(人)</p>
                            <p class="fon_30 title35 lh16 pad_tb_20">{{invitData.completePeople || 0}}</p>
                        </div>
                        <div class="toolTip">
                            <el-tooltip effect="dark" placement="top">
                                <div slot="content">活动完成人数</div>
                                <button type="button"
                                        class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                  <span>
                    <i class="el-icon-question"></i>
                  </span>
                                </button>
                            </el-tooltip>
                        </div>
                    </div>
                </div>
                <div class="flex-1 t_l pad_20 bortColor">
                    <div class="flex-bet flex-y-top">
                        <div>
                            <p class="title6 fon_14">活动奖励总额(元)</p>
                            <p class="fon_30 title35 lh16 pad_tb_20">{{invitData.completeMoney || 0}}</p>
                        </div>
                        <div class="toolTip">
                            <el-tooltip effect="dark" placement="top">
                                <div slot="content">活动奖励总额</div>
                                <button type="button"
                                        class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                  <span>
                    <i class="el-icon-question"></i>
                  </span>
                                </button>
                            </el-tooltip>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="outmain ba_f mar_t20">
            <div class="shuju_title mar_b20">
                <div class="shuju_title_text">
                    <span>邀请记录</span>
                </div>
            </div>
            <el-table :data="list" v-loading="listLoading" :element-loading-text="elementLoadingText" stripe
                      style="width: 100%">
                <el-table-column prop="type" label="邀请人信息  ">
                    <template slot-scope="scope">
                        <div class="flex flex-y-top">
                            <div class>
                                <img class="goodlogo bor_rad50" :src="scope.row.portrait"/>
                            </div>
                            <div class="mar_l10">
                                <div class="flex">
                                    <div>
                                        <div>{{scope.row.userName}}</div>
                                        <div>
                                            <el-tag size="mini" type="info" class="mar_l5">（ID:{{scope.row.id}}）
                                            </el-tag>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="account" label="邀请人数">
                    <template slot-scope="scope">
                        <div @click="handleEdit2(scope.row)" class="subjectcolor2 curs">{{scope.row.completeNum}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="money" label="活动完成人数">
                    <template slot-scope="scope">
                        <div>
                            <div>{{scope.row.completeNum}}</div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="completeMoney" label="活动奖励金额"></el-table-column>
                <el-table-column prop="partakeAt" label="参与活动时间"></el-table-column>
                <!--                <el-table-column prop="state" label="操作" align="center">-->
                <!--                    <template slot-scope="scope">-->
                <!--                        <div style="color: #155BD4" @click="handleEdit(scope.row)" class="curs">查看明细</div>-->
                <!--                        <div style="color: #489620" @click="handleEdit(scope.row)" class="curs">查看奖励</div>-->
                <!--                    </template>-->
                <!--                </el-table-column>-->
            </el-table>
            <el-pagination background layout="prev, pager, next" :total="page.total" :page-size="page.pagesize"
                           :current-page.sync="page.currentPage" @current-change="handleCurrentChange"></el-pagination>
            <edit ref="edit" @fetchData="fetchData"></edit>
        </div>
    </div>
</template>
<script>
    import {invitation} from '@/api/plug';
    import Edit from "./components/seePeople";

    export default {
        components: {Edit},
        data() {
            return {
                list: [],
                listLoading: true,
                selectRows: '',
                elementLoadingText: '正在加载...',
                page: {
                    total: 0,
                    size: 10,
                    currentPage: 1
                },
                actId: '',
                invitData: {},
            };
        },
        created() {
            this.fetchData();
            if (this.$route.query.id) {
                this.actId = this.$route.query.id
                this.fetchData()
            }
        },

        methods: {
            async fetchData() {
                this.listLoading = true;
                const {data, count} = await invitation({page: this.page.currentPage, actId: this.actId});
                this.list = data.list;
                this.invitData = data
                this.page.total = count;
                this.listLoading = false;
            },
            handleCurrentChange(val) {
                this.page.currentPage = val;
                this.fetchData();
            },
            handleEdit(row) {
                if (row.id) {
                    this.$router.push(`/rewardInfo?id=${row.id}`);
                }
            },
            handleEdit2(row) {
                console.log(row)
                if (row.id) {
                    this.$refs["edit"].showEdit(row);
                    this.$refs["edit"].showEdit2(this.actId);
                } else {
                    this.$refs["edit"].showEdit();
                }
            },
        }
    };
</script>
